<?php
/* @var */
$this->pageTitle=Yii::app()->name;
?>
<!--wrap text in column-->
<style type="text/css">
    .ui-jqgrid tr.jqgrow td {
        word-wrap: break-word; /* IE 5.5+ and CSS3 */
        white-space: pre-wrap; /* CSS3 */
        white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
        white-space: -pre-wrap; /* Opera 4-6 */
        white-space: -o-pre-wrap; /* Opera 7 */
        overflow: hidden;
        height: auto;
        vertical-align: middle;
        padding-top: 3px;
        padding-bottom: 3px
    }
</style>
<div id="breadcrumbs" class="breadcrumbs">
    <script type="text/javascript">
        try{ace.settings.check('breadcrumbs' , 'fixed')}catch(e){};
    </script>
    
    <ul class="breadcrumb">
        <li>
            <i class="icon-home home-icon"></i>
            <a href="../site/index"><strong>Trang Chủ</strong></a>
        </li>
        
        <li>
            <a href="../site/order"><strong>Đặt Hàng</strong></a>
        </li>
    </ul><!-- .breadcrumb -->
    
    <div id="nav-search" class="nav-search">
        <form class="form-search">
            <span class="input-icon">
                <input type="text" autocomplete="off" id="nav-search-input" class="nav-search-input" placeholder="Search ...">
                <i class="icon-search nav-search-icon"></i>
            </span>
        </form>
    </div><!-- #nav-search -->
</div>    

<div class="page-content">
    <div class="page-header">
        <h1>
            <strong>Quản Lý</strong>
            <small>
                <i class="icon-double-angle-right"></i>
                <strong>Quản Lý Đặt Hàng</strong>
            </small>
        </h1>
    </div><!-- /.page-header -->
    
    <div class="row">
        <div class="col-xs-12">
            <!-- PAGE CONTENT BEGINS -->
            
            <table id="grid-table"></table>
            
            <div id="grid-pager"></div>           
            
            <!-- PAGE CONTENT ENDS -->
        </div><!-- /.col -->
    </div><!-- /.row -->
    <div class="row">
        <div class="col-xs-6">
            <!-- PAGE CONTENT BEGINS -->
            
            <table id="grid-item"></table>
            
            <div id="grid-pager-item"></div>           
            
            <!-- PAGE CONTENT ENDS -->
        </div> <!--/.col -->
        <div class="col-xs-6">
            <!-- PAGE CONTENT BEGINS -->
            <table id ="grid-item-available"></table>
            
            <div id = "grid-pager-item-available"></div>
            
            <!-- PAGE CONTENT ENDS -->
        </div> <!--/.col -->
    </div><!-- /.row -->    
    
</div><!-- /.page-content -->

<!--drag and drop-->
<!-- <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">-->
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<!-- basic scripts -->
<!--[if !IE]> -->
<script type="text/javascript">
    window.jQuery || document.write("<script src='<?php echo Yii::app()->baseUrl."/assets/js/jquery-2.0.3.min.js"?>'>"+"<"+"/script>");
</script>
<!-- <![endif]-->

<!--[if IE]>
<script type="text/javascript">
window.jQuery || document.write("<script src='<?php echo Yii::app()->baseUrl."/assets/js/jquery-1.10.2.min.js"?>'>"+"<"+"/script>");
</script>
<![endif]-->

<script type="text/javascript">
    if("ontouchend" in document) document.write("<script src='<?php echo Yii::app()->baseUrl."/assets/js/jquery.mobile.custom.min.js"?>'>"+"<"+"/script>");
</script>
<script src="<?php echo Yii::app()->baseUrl."/assets/js/bootstrap.min.js" ?>"></script>
<script src="<?php echo Yii::app()->baseUrl."/assets/js/typeahead-bs2.min.js"?>"></script>

<!-- page specific plugin scripts -->
<script src="<?php echo Yii::app()->baseUrl."/assets/js/date-time/bootstrap-datepicker.min.js"?>"></script>
<script src="<?php echo Yii::app()->baseUrl."/assets/js/jqGrid/jquery.jqGrid.min.js"?>"></script>
<script src="<?php echo Yii::app()->baseUrl."/assets/js/jqGrid/i18n/grid.locale-en.js"?>"></script>

<!-- ace scripts -->
<script src="<?php echo Yii::app()->baseUrl."/assets/js/ace-elements.min.js"?>"></script>
<script src="<?php echo Yii::app()->baseUrl."/assets/js/ace.min.js"?>"></script>

<!--elFinder CSS (REQUIRED)--> 
<link rel="stylesheet" type="text/css" media="screen" href="<?php echo Yii::app()->baseUrl ?>/css/elfinder.min.css">
<link rel="stylesheet" type="text/css" media="screen" href="<?php echo Yii::app()->baseUrl ?>/css/theme.css">

<!--elFinder JS (REQUIRED)--> 
<script type="text/javascript" src="<?php echo Yii::app()->baseUrl ?>/js/elfinder.min.js"></script>

<!--elFinder translation (OPTIONAL)--> 
<!--<script type="text/javascript" src="<?php echo Yii::app()->baseUrl ?>/js/i18n/elfinder.ru.js"></script>-->

<!--elFinder initialization (REQUIRED)--> 
<script type="text/javascript" charset="utf-8">
    $().ready(function() {
    });
</script>

<script type="text/javascript">
    //Center form
    jQuery.fn.center = function () { 
        this.css("position","absolute");
        this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
        this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
        return this;
    };
    jQuery(function($) {
        try{
            var grid_selector = "#grid-table";
            var pager_selector = "#grid-pager";
            var grid_item = "#grid-item";
            var pager_item = "#grid-pager-item";
            var grid_item_available = "#grid-item-available";
            var paper_item_available = "#grid-pager-item-available";
                    
            function beforeDeleteCallback(e) {
                var form = $(e[0]);
                if(form.data('styled')) return false;                        
                form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
                style_delete_form(form);                        
                form.data('styled', true);
            }
            //enable datepicker
            function pickDate( cellvalue, options, cell ) {
                setTimeout(function(){
                    $(cell) .find('input[type=text]')
                            .datepicker({format:'yyyy-mm-dd' , autoclose:true}); 
                }, 0);
            } 
            //switch element when editing inline
            function aceSwitch( cellvalue, options, cell ) {
                setTimeout(function(){
                    $(cell) .find('input[type=checkbox]')
                            .wrap('<label class="inline" />')
                            .addClass('ace ace-switch ace-switch-5')
                            .after('<span class="lbl"></span>');
                }, 0);
            }   
				
            function style_edit_form(form) {
                //enable datepicker on "sdate" field and switches for "stock" field
                                        
                form.find('input[name=sdate]').datepicker({format:'yyyy-mm-dd' , autoclose:true})
                        .end().find('input[name=stock]')
                        .addClass('ace ace-switch ace-switch-5').wrap('<label class="inline" />').after('<span class="lbl"></span>');
			
                //update buttons classes
                var buttons = form.next().find('.EditButton .fm-button');
                buttons.addClass('btn btn-sm').find('[class*="-icon"]').remove();//ui-icon, s-icon
                buttons.eq(0).addClass('btn-primary').prepend('<i class="icon-ok"></i>');
                buttons.eq(1).prepend('<i class="icon-remove"></i>');
					
                buttons = form.next().find('.navButton a');
                buttons.find('.ui-icon').remove();
                buttons.eq(0).append('<i class="icon-chevron-left"></i>');
                buttons.eq(1).append('<i class="icon-chevron-right"></i>');
            }
			
            function style_delete_form(form) {
                var buttons = form.next().find('.EditButton .fm-button');
                buttons.addClass('btn btn-sm').find('[class*="-icon"]').remove();//ui-icon, s-icon
                buttons.eq(0).addClass('btn-danger').prepend('<i class="icon-trash"></i>');
                buttons.eq(1).prepend('<i class="icon-remove"></i>')
            }
				
            function style_search_filters(form) {
                form.find('.delete-rule').val('X');
                form.find('.add-rule').addClass('btn btn-xs btn-primary');
                form.find('.add-group').addClass('btn btn-xs btn-success');
                form.find('.delete-group').addClass('btn btn-xs btn-danger');
            }
            function style_search_form(form) {
                var dialog = form.closest('.ui-jqdialog');
                var buttons = dialog.find('.EditTable')
                buttons.find('.EditButton a[id*="_reset"]').addClass('btn btn-sm btn-info').find('.ui-icon').attr('class', 'icon-retweet');
                buttons.find('.EditButton a[id*="_query"]').addClass('btn btn-sm btn-inverse').find('.ui-icon').attr('class', 'icon-comment-alt');
                buttons.find('.EditButton a[id*="_search"]').addClass('btn btn-sm btn-purple').find('.ui-icon').attr('class', 'icon-search');
            }
				
            function beforeEditCallback(e) {
                var form = $(e[0]);
                form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
                style_edit_form(form);
            }
            //it causes some flicker when reloading or navigating grid
            //it may be possible to have some custom formatter to do this as the grid is being created to prevent this
            //or go back to default browser checkbox styles for the grid
            function styleCheckbox(table) {
                /*
                                $(table).find('input:checkbox').addClass('ace')
                                .wrap('<label />')
                                .after('<span class="lbl align-top" />')
			
			
                                $('.ui-jqgrid-labels th[id*="_cb"]:first-child')
                                .find('input.cbox[type=checkbox]').addClass('ace')
                                .wrap('<label />').after('<span class="lbl align-top" />');
                 */
            }
            //unlike navButtons icons, action icons in rows seem to be hard-coded
            //you can change them like this in here if you want
            function updateActionIcons(table) {
                /**
                                var replacement = 
                                {
                                        'ui-icon-pencil' : 'icon-pencil blue',
                                        'ui-icon-trash' : 'icon-trash red',
                                        'ui-icon-disk' : 'icon-ok green',
                                        'ui-icon-cancel' : 'icon-remove red'
                                };
                                $(table).find('.ui-pg-div span.ui-icon').each(function(){
                                        var icon = $(this);
                                        var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
                                        if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
                                })
                 */
            }
            //replace icons with FontAwesome icons like above
            function updatePagerIcons(table) {
                var replacement = 
                        {
                    'ui-icon-seek-first' : 'icon-double-angle-left bigger-140',
                    'ui-icon-seek-prev' : 'icon-angle-left bigger-140',
                    'ui-icon-seek-next' : 'icon-angle-right bigger-140',
                    'ui-icon-seek-end' : 'icon-double-angle-right bigger-140'
                };
                $('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function(){
                    var icon = $(this);
                    var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
                    if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
                })
            }
            function enableTooltips(table) {
                $('.navtable .ui-pg-button').tooltip({container:'body'});
                $(table).find('.ui-pg-div').tooltip({container:'body'});
            } 
            //datapicker
            initDateEdit = function (elem) {
                setTimeout(function () {
                    $(elem).datepicker({
                        dateFormat: 'd/m/Y',
                        autoSize: true,
                        showOn: 'button', // it dosn't work in searching dialog
                        changeYear: true,
                        changeMonth: true,
                        showButtonPanel: true,
                        showWeek: true
                    });
                    //$(elem).focus();
                }, 100);
            },
            initDateSearch = function (elem) {
                setTimeout(function () {
                    $(elem).datepicker({
                        dateFormat: 'd/m/Y',
                        autoSize: true,
                        //showOn: 'button', // it dosn't work in searching dialog
                        changeYear: true,
                        changeMonth: true,
                        showButtonPanel: true,
                        showWeek: true
                    });
                    //$(elem).focus();
                }, 100);
            },
            jQuery(grid_selector).jqGrid({
                url:'../ajax/getOrder', 
                datatype: "json",
                height: 250,
                colNames:['Id','Tên hóa đơn','Tên khách hàng','Số DT','Ngày đặt hàng','Giảm giá','Tổng tiền','Mô tả','Trạng thái'],
                colModel:[
                    //						{name:'myac',index:'', width:80, fixed:true, sortable:false, resize:false,
                    //							formatter:'actions',
                    //							formatoptions:{ 
                    //								keys:true,
                    //								delOptions:{recreateForm: true,url:'../ajax/deleteOrder', datatype:"json", beforeShowForm:beforeDeleteCallback},
                    //								editformbutton:true, editOptions:{recreateForm: true,url:'../ajax/editOrder', datatype:"json", beforeShowForm:beforeEditCallback,closeAfterEdit: true}
                    //							}
                    //						},
                    //, hidden: true,editable : true, editrules: {edithidden:true}
                    //hidden, readonly and can edit inline, but can't show in edit.
                    {name:'Id',index:'Id',  sorttype:"int",editable:true, hidden: true,
//                        editrules:{required:true}, 
                        editoptions:{ 
                            dataInit: function(element) { 
                                $(element).attr("readonly", "readonly"); 
                            } 
                        }
                    },
                    {name:'NameOrder',index:'NameOrder', editable: true, editoptions:{defaultValue: 'Đơn đặt hàng mới'}, sorttype:'text'},
                    {name:'NameCustomer',index:'NameCustomer', editable: true, editoptions:{defaultValue: 'Khác hàng mới'},sorttype:'text'},
                    {name:'MobileCustomer',index:'MobileCustomer', editable: true, align:"right", sorttype:'text'},
                    {name:'DateOrder',index:'DateOrder', editable: true, sorttype:'date', align:"right",
                        formatter: 'date',
                        formatoptions: {
                            srcformat: 'm/d/Y',
                            newformat: 'm/d/Y'
                        },
                        editoptions: {
                            dataInit: initDateEdit,                                                                                                                                        
                        },
                        searchoptions: {
                            dataInit: initDateSearch
                        }                  
                    },
                    {name:'Discount',index:'Discount', editable: true, sorttype:'float', width: 100, align:"right", editoptions:{defaultValue: '0'}},
                    {name:'SumPrice',index:'SumPrice', editable: true, sorttype:'float', align:"right", editoptions:{defaultValue: '0'}},
                    {name:'Description',index:'Description', editable: true, sortable:false, edittype: 'textarea', editoptions: {rows:"2",cols:"20"}, autoencode: true},
                    {name:'IsFinish',index:'IsFinish', editable: true, sorttype:'int', edittype: 'select', editoptions:{value:{1:'Đã giao', 0:'Chưa giao', 2:'Hủy'}},
                        formatter:'select'
                        //                         formatter: function (cellvalue, options, cell) {   
                        //                           var tmp = "Không thai đổi";                                            
                        //                            if(cellvalue == 1){
                        //                                tmp = "Đã giao";                                                                                                                        
                        //                            }else if (cellvalue == 0){
                        //                                tmp = "Chưa giao";
                        //                            }
                        //                            else if (cellvalue == 2) tmp ="Hủy";
                        //                                return tmp;
                    },
                ],                 
                rowNum:10,
                rowList:[10,20,30],
                pager : pager_selector,
                //                sortname:"Id",
                viewrecords : true,
                sortorder: "desc",
                sortable:true,
                //                viewsortcols: true,
                loadonce: true,
                //					altRows: true,
                                                                                
                //					multiselect: true,
                //                                                                                                multiboxonly: true,
                                                                                                
                caption: "Danh Sách Đặt Hàng",
                autowidth: true,
                //                                                                                                cellEdit: true,
                //                                                                                                editurl:'../ajax/editOrder',
                //                                                                                                editOptions:{recreateForm: true,url:'../ajax/editOrder', datatype:"json", beforeShowForm:beforeEditCallback,closeAfterEdit: true},
                                                
			
                loadComplete : function() {
                    var table = this;
                    setTimeout(function(){
                        styleCheckbox(table);
                        updateActionIcons(table);
                        updatePagerIcons(table);
                        enableTooltips(table);
                    }, 0);
                },
                        
                ondblClickRow: function (ids) {
                    //edit inline                    
                    var editparameters = {
                        "keys" : true,
                        "oneditfunc" : null,                                                 
                        "successfunc" : null,
                        "url" : "../ajax/editOrder",
                        "extraparam" : {},
                        "aftersavefunc" : function() {
                            jQuery(grid_selector).jqGrid().trigger('reloadGrid',[{page:1}]); 
                        },
                        "errorfunc": function() { alert ("error");},
                        "afterrestorefunc" : function(){
                            jQuery(grid_selector).jqGrid().trigger('reloadGrid',[{page:1}]); 
                        },
                        "restoreAfterError" : true,
                        "mtype" : "POST",
                    };
                    jQuery(this).editRow(ids, editparameters);   
                    //                    $(this).trigger('reloadGrid');
                    //                     jQuery(grid_selector).jqGrid('editRow',ids,editparameters);
                },			
                //editurl: "error.php",//nothing is saved
                onSelectRow: function(ids) { 
                    var lastSel;
                    var saveparameters = {
                        "keys" : true,
                        "oneditfunc" : null,                                                 
                        "successfunc" : null,
                        "url" : "../ajax/editOrder",
                        "extraparam" : {},
                        "aftersavefunc" : function() {
                            //                                                 alert ("edited");
                            jQuery(grid_selector).jqGrid().trigger('reloadGrid'); 
                        },
                        "errorfunc": function() { alert ("error");},
                        "afterrestorefunc" : function(){
                            jQuery(grid_selector).jqGrid().trigger('reloadGrid'); 
                        },
                        "restoreAfterError" : true,
                        "mtype" : "POST",
                    };
                    if(ids && ids!==lastSel){ 
                        jQuery(grid_selector).jqGrid('restoreRow',lastSel);
                        //                        jQuery(grid_selector).jqGrid('saveRow',lastSel,saveparameters);
                        lastSel=ids; 
                    } ;
          
                    //set caption and ids
                    if(ids === null) { 
                        ids=0; 
                        if(jQuery(grid_item).jqGrid('getGridParam','records') >0 ) {
                            jQuery(grid_item).jqGrid('setGridParam',{
                                url:"../ajax/getOrderItems?id="+ids,
                                page:1
                            });                                           
                            jQuery(grid_item).jqGrid('setCaption',"Danh sách sản phẩm đặt hàng") .trigger('reloadGrid'); 
                        } } 
                    else { 
                        jQuery(grid_item).jqGrid('setGridParam',{
                            url:"../ajax/getOrderItems?id="+ids,
                            page:1
                        }); 
                        jQuery(grid_item).jqGrid('setCaption',"Danh sách sản phẩm đặt hàng") .trigger('reloadGrid');
                    }
                    $(grid_item_available).trigger('reloadGrid');
                }
            }); 
            //enable search/filter toolbar
            //jQuery(grid_selector).jqGrid('filterToolbar',{defaultSearch:true,stringResult:true})
            //
            //navButtons
            jQuery(grid_selector).jqGrid('navGrid',pager_selector,
            { 	//navbar options
                edit: true,
                editicon : 'icon-pencil blue',
                add: true,
                addicon : 'icon-plus-sign purple',
                del: true,
                delicon : 'icon-trash red',
                search: true,
                searchicon : 'icon-search orange',
                refresh: true,
                refreshicon : 'icon-refresh green',
                view: true,
                viewicon : 'icon-zoom-in grey'
            },
            {
                //edit record form						
                url:'../ajax/editOrder',
                datatype:"json",
                recreateForm: true,
                editCaption : "Chỉnh sửa",
                closeAfterEdit: true,
                reloadAfterSubmit:true,
                beforeShowForm : function(e) {
                    var form = $(e[0]);                                                 
                    form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />');
                    style_edit_form(form);
                },
                afterShowForm: function(form) {
                    form.closest('div.ui-jqdialog').center();
                }
            },
            {
                //new record form
                url:'../ajax/addOrder',
                datatype:"json",
                addCaption : 'Thêm mới',
                closeAfterAdd: true,
                recreateForm: true,
                viewPagerButtons: false,        
                reloadAfterSubmit:true,
                beforeShowForm : function(e) {
                    var form = $(e[0]);
                    form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />');
                    style_edit_form(form);                                                        
                },
                afterShowForm: function(form) {
                    form.closest('div.ui-jqdialog').center();
                }
                                                
            },
            {
                //delete record form
                url:'../ajax/deleteOrder',
                datatype:"json",
                recreateForm: true,
                reloadAfterSubmit:true,
                beforeShowForm : function(e) {
                    var form = $(e[0]);                                                
                    if(form.data('styled')) return false;
                    form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
                    style_delete_form(form);
                    form.data('styled', true);
                },
                afterShowForm: function(form) {
                    form.closest('div.ui-jqdialog').center();
                },
                onClick : function(e) {
                    alert(1);
                }
            },
            {
                //search form
                recreateForm: true,
                afterShowSearch: function(e){
                    var form = $(e[0]);
                    form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
                    style_search_form(form);
                },
                afterRedraw: function(){
                    style_search_filters($(this));
                }
                ,
                multipleSearch: true
                /**
                                        multipleGroup:true,
                                        showQuery: true
                 */
            },
            {
                //view record form
                recreateForm: true,
                beforeShowForm: function(e){
                    var form = $(e[0]);
                    form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
                }
            }
        );
                           
            jQuery(grid_item).jqGrid({ 
                url:'../ajax/getOrderItems', 
                datatype: "json",
                //                                        height: 250,
                colNames:['Mã đặt hàng','Id Item', 'Giá', 'Tên sản phẩm','Số Lượng','Giảm Giá'], 
                colModel:[ 
                    {name:'IdOrder',index:'IdOrder', sorttype:"int", hidden: true , editrules: {edithidden:true}}, 
                    {name:'IdItem',index:'IdItem', editable: true, sorttype: "int"},
                    {name:'Price',index:'Price', sorttype:"float", editable:true},
                    {name:'NameItem',index:'NameItem', sortable:false, editable:true},
                    {name:'NumberItem',index:'NumberItem', editable:true, sorttype:"int"},                            
                    {name:'Discount',index:'Discount', align:"right", sorttype:"float",editable:true},              
                ], 
                rowNum:10, 
                rowList:[10,20,30], 
                pager: pager_item, 
                sortname: 'IdItem', 
                //                                        loadonce: true,
                sortable:true,
                viewrecords: true, 
                altRows: true,
                //                                        multiselect: true,
                //                                        multiboxonly: true,
                autowidth: true, 
                caption: "Danh sách sản phẩm đặt hàng",
            });
            jQuery(grid_item).jqGrid('navGrid',pager_item,
            { 	//navbar options
                                    
                edit: true,
                editicon : 'icon-pencil blue',
                add: true,
                addicon : 'icon-plus-sign purple',
                del: true,
                delicon : 'icon-trash red',
                search: false,
                searchicon : 'icon-search orange',
                refresh: true,
                refreshicon : 'icon-refresh green',
                view: true,
                viewicon : 'icon-zoom-in grey'
            },
            {
                //edit record form
                closeAfterEdit: true,
                url:'../ajax/editOrderItem',
                datatype:"json",
                editCaption : 'Chỉnh sửa',
                recreateForm: true,
                beforeShowForm : function(e) {
                    var form = $(e[0]);
                    form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />');
                    style_edit_form(form);
                },
                afterShowForm: function(form) {
                    form.closest('div.ui-jqdialog').center();
                }
            },
            {
                //new record form
                url:'../ajax/insertOrderItem',
                datatype:"json",
                addCaption : 'Thêm mới',
                closeAfterAdd: true,
                recreateForm: true,
                viewPagerButtons: false,
                beforeShowForm : function(e) {
                    var form = $(e[0]);
                    form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />');
                    style_edit_form(form);
                },
                afterShowForm: function(form) {
                    form.closest('div.ui-jqdialog').center();
                }  
            },
            {
                //delete record form                     
                url:"../ajax/deleteOrderItem",
                datatype:"json",
                recreateForm: true,
                beforeShowForm : function(e) {
                    var form = $(e[0]);
                    if(form.data('styled')) return false;
                    form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
                    style_delete_form(form);
                    form.data('styled', true);
                },
                afterShowForm: function(form) {
                    form.closest('div.ui-jqdialog').center();
                },
                onClick : function(e) {
                                            
                    alert(1);
                }
            },
            {
                //search form
                recreateForm: true,
                afterShowSearch: function(e){
                    var form = $(e[0]);
                    form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
                    style_search_form(form);
                },
                afterRedraw: function(){
                    style_search_filters($(this));
                }
                ,
                multipleSearch: true
                /**
                                        multipleGroup:true,
                                        showQuery: true
                 */
            },
            {
                //view record form
                recreateForm: true,                                                        
                beforeShowForm: function(e){
                    var form = $(e[0]);
                    form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
                }
            }
        );
            jQuery(grid_item_available).jqGrid({ 
                url:'../ajax/getItemsNew', 
                datatype: "json",
                colNames:['ID','Tên Sản Phẩm','Nhóm Sản Phẩm', 'Giá', 'Mô Tả','Ảnh','Link','Giảm Giá','Đơn Vị'], 
                colModel:[ 
                    //hidden: true , editable: true, editrules: {edithidden:true}
                    {name:'Id', index:'Id', width:40, sorttype:"int"}, 
                    {name:'NameItem', index:'NameItem', width:130, editable: true, editoptions:{size:"20",maxlength:"30"}},
                    {name:'IdCategory',index:'IdCategory', sorttype:"int",  hidden: true , editable: true, editrules: {edithidden:true}}, 
                    {name:'Price',index:'Price', width:60, align:"right", sorttype:"float",editable:true},
                    {name:'Description',index:'Description', sortable:false, hidden: true , editable: true, editrules: {edithidden:true}, autoencode: true},
                    {
                        name: 'LinkImage',
                        editable: true,
                        fixed: true,
                        edittype: 'image',
                        width: 100,
                        editoptions: {src: '../../images/photo.png',onclick:'imageClick();',width:'100',height:'100'},   
                        formatter: function (cellvalue, options, cell) {                                                   
                            return "<img id='row_"+cell.id +"' src='../../files/"+cellvalue+"' alt='my image'  height='100' width='100' OnClick='imageClick();'/>";
                        },
                        unformat: function (cellvalue, options, cell) {                                                   
                            return $('img', cell).attr('src');
                        }                                                  
                    },
                    {
                        name: 'link',
                        editable: true,
                        fixed: true,
                        hidden: true,
                        autoencode: true
                    }, 
                    {name:'Discount',index:'Discount', width:80, align:"right", sorttype:"float",editable:true},              
                    {name:'Unit',index:'Unit', width:60, align:"right", editable:true, editoptions:{defaultValue: 'VND'} }, 
                ], 
                rowNum:10, 
                rowList:[10,20,30], 
                pager: paper_item_available, 
                //sortname: 'item', 
                //                                        loadonce: true,
                sortable:true,
                viewrecords: true, 
                altRows: true,
                //                                        multiselect: true,
                //                                        multiboxonly: true,
                autowidth: true, 
                caption: "Sản Phẩm Hiện Có",
            });
            //drag and drop item
            //                            jQuery(grid_item_available).jqGrid('gridDnD',{connectWith: '#grid-item'});
            //                            jQuery(grid_item).jqGrid('gridDnD',{connectWith: "#grid-item-available"});
            //                         jQuery(grid_item).jqGrid('gridDnD',{connectWith: grid_item_available});
            jQuery(grid_item_available).jqGrid('gridDnD',{connectWith: grid_item, 
            dropbyname:true,
                ondrop: function (ev, ui, getdata) {
                    var acceptId = $(ui.draggable).attr("Id");    //id row
                    $(grid_item).jqGrid('getRowData',acceptId);
                    // so you have full information about dropped row
                    var ele = ui.draggable.text(); 
                    $.ajax({
                        url: "../ajax/dropOrderItems?rowid="+acceptId,
                        type : "POST",
                        data: {element:ele},
                        beforeSend:null,
                        //                                          function(){
                        //                                                $('#search_result').html("<center><br/><h4>Loading.....</h4></center>");
                        //                                                            },
                        success:function(data){
                            $(grid_item).trigger("reloadGrid");
                        }                    
                    });        
                }                         
            });                        
            //                        $(function() {
            //                        $(grid_item).draggable();
            //                        $(grid_item_available).droppable({
            //                        drop: function( event, ui ) {
            //                            var ele = ui.draggable.text(); 
            //                            $.ajax({
            //                                  url: "../ajax/dropItems",
            //                                  type : "POST",
            //                                  data: {element:ele},
            //                                  beforeSend:function(){
            //                                                $('#search_result').html("<center><br/><h4>Loading.....</h4></center>");
            //                                                            },
            //                                success:function(data){
            //                                               $("#search_result").html(data);
            //                                                            }
            //                                 });
            //                        } });
            //                        });
//            function imageClick(){
//                $( "#dialog-message" ).dialog({
//                    title:"",
//                    height:600,
//                    width:1100,
//                    modal: true
//                });
//					
//                var elf = $('#elfinder').elfinder({
//                    url : '<?php echo Yii::app()->baseUrl ?>/php/connector.php' // connector URL (REQUIRED)
//                    ,lang: 'en',
//                    width:'100%',
//                    commandsOptions: {
//                        getfile: {
//                            oncomplete: 'destroy' 
//                        }
//                    },
//                    getFileCallback: function(file) {
//                        $('#LinkImage').attr('src',file);
//                        $('#link').attr('value',file);
//                        $( "#dialog-message" ).dialog( "close" );
//                    }
//                }).elfinder('instance'); 
//                
//            };
        }catch(e){
            alert(e);
        }		
    }
    );

    function change( el )
    {
        if ( el.value === "Đã giao" )
            el.value = "Chưa giao";
        else
            el.value = "Đã giao";
    }       
</script>
<!--<div id="dialog-message" >
    <div id="elfinder"></div>
</div>-->
<!--        <div id="search_result"></div>-->

